<script setup lang="ts">
import { ref } from "vue";
import useRouterHook from "@/hooks/useRouterHook";
import usePost from "@/hooks/usePost";
import { ApprovalStatusEnum, ApprovalStatusMap, PROCESS_TYPE_MAP, ProcessTypeEnum, TabEnum, TAB_MAP } from "./constants";
import { useAppStore } from "@/store";
import type { TagType } from "vant";
import type { ApprovalItemType } from "./types";
import { formatDate } from "@/utils/index";

const { routerPush, route } = useRouterHook();
const appStore = useAppStore();
const currentUser = appStore.getUserId();
const { menu: queryMenu } = route.query;
const { runAsync: getDataListApi } = usePost("POST", "/mistake-api/api/page");
const type = (route.query?.type ? +route.query.type : ProcessTypeEnum.INQUIRY) as ProcessTypeEnum;
const formPath = PROCESS_TYPE_MAP[type];
const activeIndex = ref<number>(queryMenu ? +queryMenu : TabEnum.PENDING),
	listLoading = ref(false),
	listError = ref(false),
	listErrorFlag = ref(false),
	finished = ref(false),
	dataList = ref<ApprovalItemType[]>([]),
	current = ref(0),
	pageSize = 10,
	params = ref({
		menu: activeIndex.value,
		type
	});

/** 激活的标签发生更改 */
const tabsChange = async (index: number) => {
	current.value = 1;
	dataList.value = [];
	params.value.menu = index;
	finished.value = false;
	await getDataList();
};

/** 触发下拉加载 */
const onLoad = async () => {
	current.value = listErrorFlag.value ? 1 : current.value + 1;
	await getDataList();
};

/** 获取数据列表 */
const getDataList = async () => {
	try {
		listLoading.value = true;
		listErrorFlag.value = false;
		dataList.value = current.value <= 1 ? [] : dataList.value;
		const { data } = await getDataListApi({
			currentUser,
			pageNum: current.value,
			pageSize,
			...params.value
		});
		dataList.value = dataList.value.length ? [...dataList.value, ...data.records] : data.records;
		finished.value = dataList.value.length === data.total;
	} catch (error) {
		listError.value = true;
		listErrorFlag.value = true;
		console.log("error", error, listError.value);
	} finally {
		listLoading.value = false;
	}
};

/** 点击创建按钮 */
const createCustomer = () => {
	routerPush({
		path: formPath
	});
};

/** 点击待办，跳转审批页 */
const handleClickItem = (item: ApprovalItemType) => {
	routerPush({
		path: "/approve",
		query: {
			id: item.id,
			type,
			menu: activeIndex.value
		}
	});
};
</script>

<template>
	<div class="inquiry-list">
		<van-tabs class="tabs" v-model:active="activeIndex" @change="tabsChange">
			<van-tab
				v-for="(tb, index) in Object.keys(TAB_MAP)"
				:key="index"
				:title="TAB_MAP[tb as any as TabEnum]"
				:name="+tb"
			></van-tab>
		</van-tabs>
		<div class="list">
			<van-list
				v-model:loading="listLoading"
				v-model:error="listError"
				:finished="finished"
				finished-text="没有更多了"
				error-text="请求失败，点击重新加载"
				@load="onLoad"
			>
				<template v-for="item in dataList" :key="item.id">
					<div class="list-item" @click="handleClickItem(item)">
						<div class="header">
							<p class="title">{{ item.auditName }}</p>
							<van-tag
								v-if="item.procInstStatus && item.procInstStatus !== 'null'"
								class="tag"
								size="medium"
								:type="ApprovalStatusMap[item.procInstStatus as ApprovalStatusEnum].tagType as TagType"
							>
								{{ ApprovalStatusMap[item.procInstStatus as ApprovalStatusEnum].text }}</van-tag
							>
						</div>
						<p>提交人：{{ item.creatorName }}</p>
						<p>提交人部门：{{ item.dept }}</p>
						<div class="footer">
							<p class="name">
								<span class="avatar">{{ item.creatorName.charAt(0) }}</span
								><span class="txt">{{ item.creatorName }}</span>
							</p>
							<span>{{ formatDate(item.createTime, "YYYY-MM-DD HH:mm:ss") }}</span>
						</div>
					</div>
				</template>
			</van-list>
		</div>
		<van-floating-bubble axis="xy" icon="plus" magnetic="x" @click="createCustomer" />
	</div>
</template>

<style scoped lang="less">
.inquiry-list {
	p {
		margin: 0;
	}
	.tabs {
		border-bottom: 1px solid #f5f5f5;
	}
	.list {
		.list-item {
			&:active {
				background-color: #f5f5f5;
			}
			display: flex;
			flex-direction: column;
			padding: 10px;
			background-color: #fff;
			border-bottom: 1px solid #f5f5f5;
			.header {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				margin-bottom: 10px;
				.title {
					font-size: 16px;
					font-weight: 600;
					line-height: 1.2;
				}
				.tag {
					flex-shrink: 0;
				}
			}
			> p {
				font-size: 14px;
				& + p {
					margin-top: 10px;
				}
			}
			.footer {
				display: flex;
				justify-content: space-between;
				font-size: 12px;
				margin-top: 10px;
				.name {
					display: flex;
					align-items: center;
				}
				.avatar {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 16px;
					height: 16px;
					padding: 2px;
					background-color: blue;
					color: #fff;
					border-radius: 100%;
					overflow: hidden;
					font-size: 10px;
				}
				.txt {
					margin-left: 2px;
				}
			}
		}
	}
}
</style>
